<template>
  <van-row>
    <van-grid :border="false">
      <!-- 显示头衔 -->
      <van-grid-item>
        <van-image round width="80px" height="80px" @click="onClickHead(defaultHeadUrl)" :src="defaultHeadUrl">
          <template v-slot:error>加载失败</template>
        </van-image>
      </van-grid-item>
      <!-- 用户名 -->
      <van-grid-item style="flex-basis: 72%;">
        <van-cell :is-link="isLink">
          <template>
            <label v-if="!isLink">{{userName}}</label>
            <label v-else>Hi,您未登录</label>
          </template>
          <template #right-icon>
            <van-icon :name="setImgUrl" @click="onOpenSetDialog" />
          </template>
        </van-cell>
      </van-grid-item>
    </van-grid>
  </van-row>

</template>
<script>
  import {
    Image as VanImage,
    ImagePreview,
    Grid,
    GridItem,
    Cell,
    Row,
    Icon
  } from 'vant';

  export default {
    name: "Head",
    description: "头像操作",
    components: {
      'van-row': Row,
      'van-image': VanImage,
      'van-grid': Grid,
      'van-grid-item': GridItem,
      'van-cell': Cell,
      'van-icon': Icon
    },
    data: function () {
      return {
        //头像地址
        headUrl: "",
        //默认头像地址
        defaultHeadUrl: "./static/imgs/defaultuser.png",
        //用户名称
        userName: "Naruto_Hiabo",
        //用户id
        userId: "",
        setImgUrl: "./static/imgs/system.png", //设置图片的地址
      }
    },
    methods: {
      //监听头像的点击
      onClickHead(url) {
        //显示大图
        ImagePreview({
          images: [url],
          closeable: true,
        });
      },
      onOpenSetDialog() {
        this.$router.push('/system');
      }
    },
    //计算属性
    computed: {
      isLink: function () {
        if (this.userId) {
          return false;
        }
        return true;
      }
    },
    mounted: async function () {
      //获取用户信息
      var userInfo = this.$user.getUserInfo();
      this.headUrl = userInfo.heardImgUrl;
      this.userId = userInfo.id;
      this.userName = userInfo.name;
    }
  }

</script>
